/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-switch {
    width: var(--pure-switch-width, 3.5em);
    height: var(--pure-switch-height, 2em);
    border-radius: var(--pure-switch-border-radius, 100px);
    overflow: hidden;
    position: relative;
    --var-pure-switch-circle-gap: var(--pure-switch-circle-gap, 2px);
    --var-pure-switch-circle-size: calc(var(--pure-switch-height, 2em) - var(--var-pure-switch-circle-gap) * 2);
    display: inline-flex;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--pure-switch-border-radius, 100px);
        background: var(--pure-switch-background, var(--pure-border-color-gary));
        z-index: 0;
        opacity: var(--pure-switch-background-opacity);
        transition: var(--pure-switch-transition, all 0.3s);
    }

    &__circle {
        content: "";
        position: absolute;
        width: var(--var-pure-switch-circle-size);
        height: var(--var-pure-switch-circle-size);
        border-radius: var(--pure-switch-circle-border-radius, 50%);
        background: var(--pure-switch-background, #ffffff);
        z-index: 2;
        opacity: var(--pure-switch-background-opacity);
        left: var(--pure-switch-circle-gap, 2px);
        top: var(--pure-switch-circle-gap, 2px);
        transition: var(--pure-switch-transition, all 0.3s);
    }

    &__content {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        padding: 0 var(--var-pure-switch-circle-gap);
    }

    &--checked {
        &::before {
            background: var(--pure-switch-checked-background, var(--pure-theme-primary));
        }

        .pure-switch__circle {
            transform: translateX(calc(var(--pure-switch-width, 3.5em) - var(--var-pure-switch-circle-size) - var(--var-pure-switch-circle-gap) * 2));
        }
    }

    &--disabled {
        pointer-events: none;
        opacity: var(--pure-switch-disabled-opacity, var(--pure-opacity-disabled));
    }
}